<template>
  <el-dialog
    title="发表评论"
    :visible.sync="visible"
    width="600px"
    :before-close="handleClose"
    class="comment-modal"
  >
    <div class="comment-form">
      <!-- 商品信息 -->
      <div class="product-info">
        <img :src="baseApi + product.imgs" :alt="product.name" class="product-image" />
        <div class="product-details">
          <h4>{{ product.name }}</h4>
          <p class="product-desc">{{ product.description }}</p>
        </div>
      </div>
      
      <!-- 评分 -->
      <div class="rating-section">
        <label>评分：</label>
        <el-rate
          v-model="form.rating"
          :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
          show-text
          :texts="['很差', '较差', '一般', '满意', '很满意']"
        />
      </div>
      
      <!-- 评论内容 -->
      <div class="content-section">
        <label>评论内容：</label>
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="4"
          placeholder="请描述您对商品的感受，对其他买家有很大帮助哦～"
          maxlength="500"
          show-word-limit
        />
      </div>
      
      <!-- 图片上传 -->
      <div class="image-section">
        <label>上传图片：</label>
        <el-upload
          :action="uploadUrl"
          list-type="picture-card"
          :on-success="handleUploadSuccess"
          :on-remove="handleUploadRemove"
          :file-list="fileList"
          :limit="5"
          accept="image/*"
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过2MB，最多5张
          </div>
        </el-upload>
      </div>
      
      <!-- 匿名选项 -->
      <div class="anonymous-section">
        <el-checkbox v-model="form.isAnonymous">匿名评论</el-checkbox>
        <span class="anonymous-tip">（选择匿名后，其他用户将看不到您的用户名）</span>
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submitComment" :loading="submitting">
        {{ submitting ? '提交中...' : '发表评论' }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import API from '@/utils/request'

export default {
  name: 'CommentModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    product: {
      type: Object,
      required: true
    },
    orderId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      baseApi: this.$store.state.baseApi,
      uploadUrl: this.$store.state.baseApi + '/api/file/upload',
      visible: false,
      submitting: false,
      form: {
        rating: 5,
        content: '',
        images: '',
        isAnonymous: false
      },
      fileList: [],
      uploadedImages: []
    }
  },
  watch: {
    show(val) {
      this.visible = val
    },
    visible(val) {
      if (!val) {
        this.$emit('close')
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
      this.resetForm()
    },
    
    resetForm() {
      this.form = {
        rating: 5,
        content: '',
        images: '',
        isAnonymous: false
      }
      this.fileList = []
      this.uploadedImages = []
    },
    
    handleUploadSuccess(response, file) {
      if (response.code === '200') {
        this.uploadedImages.push(response.data)
        this.form.images = this.uploadedImages.join(',')
      } else {
        this.$message.error('图片上传失败')
        this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      }
    },
    
    handleUploadRemove(file) {
      // 从已上传图片列表中移除
      const index = this.fileList.findIndex(item => item.uid === file.uid)
      if (index > -1) {
        this.uploadedImages.splice(index, 1)
        this.form.images = this.uploadedImages.join(',')
      }
    },
    
    async submitComment() {
      if (!this.form.content.trim()) {
        this.$message.warning('请填写评论内容')
        return
      }
      
      this.submitting = true
      
      try {
        const commentData = {
          goodId: this.product.id,
          orderId: this.orderId,
          rating: this.form.rating,
          content: this.form.content,
          images: this.form.images,
          isAnonymous: this.form.isAnonymous
        }
        
        const response = await API.post('/api/comment', commentData)
        
        if (response.code === '200') {
          this.$message.success('评论发表成功')
          this.handleClose()
          this.$emit('success')
        } else {
          this.$message.error(response.msg || '评论发表失败')
        }
      } catch (error) {
        this.$message.error('评论发表失败')
        console.error('评论提交错误:', error)
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped>
.comment-modal {
  border-radius: 12px;
}

.comment-form {
  padding: 10px 0;
}

.product-info {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 15px;
  border: 1px solid #e0e0e0;
}

.product-details h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.product-desc {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rating-section,
.content-section,
.image-section,
.anonymous-section {
  margin-bottom: 20px;
}

.rating-section label,
.content-section label,
.image-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.anonymous-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.anonymous-tip {
  color: #999;
  font-size: 12px;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

/* 上传组件样式调整 */
.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 80px;
  height: 80px;
}

.el-upload__tip {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .comment-modal {
    width: 95vw !important;
  }
  
  .product-info {
    flex-direction: column;
    text-align: center;
  }
  
  .product-image {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>

<style>
.comment-modal .el-dialog {
  border-radius: 12px;
}

.comment-modal .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 12px 12px 0 0;
}

.comment-modal .el-dialog__title {
  color: white;
  font-weight: 600;
}

.comment-modal .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.comment-modal .el-dialog__body {
  padding: 20px;
}
</style> 